"dropdown menu"
Bootstrap 3.3.0 Snippet by Pawan Pandey

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!doctype html> <html> <head> <meta charset="utf-8"> <title>menu</title> <link href="fonts/MyriadPro-Regular.otf" rel="stylesheet" type="text/css"> <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> <link href="css/Untitled-2.css" rel="stylesheet" type="text/css"> </head> <body> <div class="top-color"> </div> <section class="header"> <div class="container"> <div class="row"> <div class="col-md-4"> <img src="images/logo.png"> </div> <div class="col-md-8"> <div class="menu"> <ul> <li> <a href="#" class="active"> Home </a> </li> <li> <a href="#"> About us </a> </li> <li> <a href="#"> Service </a> <ul> <li> <a href="#"> Service </a> </li> <li> <a href="#"> Service </a> </li> <li> <a href="#"> Service </a> </li> <li> <a href="#"> Service </a> </li> </ul> </li> <li> <a href="#"> Privacy & Policy </a> </li> <li> <a href="#"> Contact Us </a> </li> </ul> </div> </div> </div> </div> </section> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/bootstrap.js" type="text/javascript"></script> </body> </html>
@charset "utf-8"; /* CSS Document */ .top-color{ width:100% } .top-color{ background:#FF0000; height: 10px; } .header{ background: #000; width:100% } .menu{ width:100%; } .menu ul{ list-style: none; margin:0px; padding:0px; } .menu ul li{ float:left; display: block; position: relative; } .menu ul li a{ background:#000; color:#FFF; display:block; font-size: 16px; padding: 10px 40px; text-decoration:none; } .menu ul li a:hover{ background: #FF0000; } .menu ul > li > ul{ display:none; } .menu ul > li:hover > ul { display: block; position: absolute; } .menu ul > li:hover > li{ float: none; }

Questions / Comments: